<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <!-- kebab-case in HTML -->
    <blog-post post-title="hello!"></blog-post>

    <blog-post title="My journey with Vue"></blog-post>

    <blog-post v-bind:title="post.title"></blog-post>

    <!-- Even though `42` is static, we need v-bind to tell Vue that -->
    <!-- this is a JavaScript expression rather than a string.       -->
    <blog-post v-bind:likes="42"></blog-post>

    <!-- Dynamically assign to the value of a variable. -->
    <blog-post v-bind:likes="post.likes"></blog-post>


    <!-- Including the prop with no value will imply `true`. -->
    <blog-post favorited></blog-post>
    <!-- Even though `false` is static, we need v-bind to tell Vue that -->
    <!-- this is a JavaScript expression rather than a string.          -->
    <base-input v-bind:favorited="false" />
    <!-- Dynamically assign to the value of a variable. -->
    <base-input v-bind:favorited="post.currentUserFavorited" />


    <!-- Even though the array is static, we need v-bind to tell Vue that -->
    <!-- this is a JavaScript expression rather than a string.            -->
    <blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
    <!-- Dynamically assign to the value of a variable. -->
    <blog-post v-bind:comment-ids="post.commentIds"></blog-post>

    <!-- Even though the object is static, we need v-bind to tell Vue that -->
    <!-- this is a JavaScript expression rather than a string.             -->
    <blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }">
    </blog-post>
    <!-- Dynamically assign to the value of a variable. -->
    <blog-post v-bind:post="post"></blog-post>

    <blog-post v-bind="post"></blog-post>

    <blog-post v-bind:id="post.id" v-bind:title="post.title">
    </blog-post>

    <bs-date-input data-3d-date-picker="true">
    </bs-date-input>

    <input type="date" class="form-control">

    <bootstrap-date-input data-date-picker="activated">
    </bootstrap-date-input>

    <bs-date-input data-3d-date-picker="true" class="date-picker-theme-dark"></bs-date-input>

    <input type="date" class="form-control">

    <base-input v-model="username" class="username-input" 
    placeholder="Enter your username"></base-input>
    
    <script>
        Vue.component('blog-post', {
            // camelCase in JavaScript
            props: ['postTitle'],
            template: '<h3>{{ postTitle }}</h3>',
            post: {
                id: 1,
                title: 'My Journey with Vue'
            },

            props: ['initialCounter'],
            data: function () {
                return {
                    counter: this.initialCounter
                }
            },
            props: ['size'],
            computed: {
                normalizedSize: function () {
                    return this.size.trim().toLowerCase()
                }
            }




        })

        Vue.component('my-component', {
            props: {
                // Basic type check (`null` matches any type)
                propA: Number,
                // Multiple possible types
                propB: [String, Number],
                // Required string
                propC: {
                    type: String,
                    required: true
                },
                // Number with a default value
                propD: {
                    type: Number,
                    default: 100
                },
                // Object with a default value
                propE: {
                    type: Object,
                    // Object or array defaults must be returned from
                    // a factory function
                    default: function () {
                        return { message: 'hello' }
                    }
                },
                // Custom validator function
                propF: {
                    validator: function (value) {
                        // The value must match one of these strings
                        return ['success', 'warning', 'danger'].indexOf(value)
                            !== -1;
                    }
                }
            }
        })
        function Person(firstName, lastName) {
            this.firstName = firstName
            this.lastName = lastName
        }

        Vue.component('blog-post', {
            props: {
                author: Person
            }
        })

        Vue.component('my-component', {
            inheritAttrs: false,
            // ...
            aa:
                {
                    class: 'username-input',
                    placeholder: 'Enter your username'
                }
        })
        Vue.component('base-input', {
            inheritAttrs: false,
            props: ['label', 'value'],
            template: `
                <label>
                {{ label }}
                <input
                    v-bind="$attrs"
                    v-bind:value="value"
                    v-on:input="$emit('input', $event.target.value)"
                >
                </label>`
        })

    </script>
</body>

</html>